//websocket对象
import {ref} from "vue";
import loginUser from "@/stores/LoginUser.js";
import axios from '@/plugins/axios.js'
import {marked} from 'marked';
let chatContent = ref("");
let msgNum = ref("0")
let websocket = null;
//连接房间的方法
let connectRoom = (url)=>{

    //判断当前浏览器是否支持websocket
    if ('WebSocket' in window){
        websocket = new WebSocket(axios.getSocketUrl()+url)
    }
    websocket.onerror = function (){
        console.log("异常")
    }
    websocket.onmessage = e => setSystemMsg(e.data)
    websocket.onopen = function (){
        setSystemMsg("1000,"+axios.getNow12()+",连接成功")
    }
    websocket.onclose = function (){
        setSystemMsg("1000,"+axios.getNow12()+",断开连接")
    }
    websocket.onbeforeunload = function (){
        websocket.close(3000,"强制关闭")
    }
}
let ai_num = 0;
//传入消息,拼接html代码
let setSystemMsg = (msg) =>{
    //解析 msg
    let msgArray = msg.split(",");
    let code=msgArray[0];
    let html = "";
    //console.log(code)
    switch (code){
        case "1000":
            //协议号，时间，消息内容
            //系统消息
            html = createSystemMsgHtml("","/src/assets/images/javasm_cd.jpg",msgArray[2],msgArray[1])
            break;
        case "2000":
            //普通消息
            let left = "";
            let msgUid = msgArray[2];
            if (loginUser().userModel.uid == msgUid){
                //说明是本人，有left
                left = "chat-left";
            }
            html = createSystemMsgHtml(left,msgArray[4],msgArray[5],msgArray[1])
            break;
        case "3000":
            //提问 3000+","+time+","+uid+","+message
            //(左右,头像,消息,时间)
            const head = loginUser().userModel.userInfo.headPic;
            html = createSystemMsgHtml("chat-left",head,msgArray[3],msgArray[1])
            break;
        case "4000":
            //回答 协议,时间,状态(0在发送,1开始,2结束),消息
            let status = msgArray[2]
            if (status == 1){
                //第一次发送
                html = '<div class="chat">\n' +
                '              <div class="chat-avatar">\n' +
                '                <a routerLink="/profile" class="d-inline-block">\n' +
                '                  <img src="http://cd.ray-live.cn/imgs/headpic/pic_50.jpg" width="50" height="50" class="rounded-circle" alt="image">\n' +
                '                </a>\n' +
                '              </div>\n' +
                '              <div class="chat-body">\n' +
                '                <div class="chat-message">\n' +
                '                  <p id="ai_msg_'+ai_num+'"></p>\n' +
                '                  <span class="time d-block">'+msgArray[1]+'</span>\n' +
                '                </div>\n' +
                '              </div>\n' +
                '            </div>';
            }else if (status == 0){
                    //获取 上一次的 答案内容
                document.getElementById("ai_msg_"+ai_num).innerHTML += msgArray[3];
            }else if (status == 2){
                let h = document.getElementById("ai_msg_"+ai_num).innerHTML;
                document.getElementById("ai_msg_"+ai_num).innerHTML = marked(h);
                //发送结束
                ai_num++;

            }
            //html = createSystemMsgHtml("","http://cd.ray-live.cn/imgs/headpic/pic_50.jpg",msgArray[3],msgArray[1])
            break;
        case "1001":
            msgNum.value = msgArray[1]
            break;
        default:
            break;
    }
    chatContent.value +=html;
}
//(左右,头像,消息,时间)
function createSystemMsgHtml(left,head,message,time){
    const html = '<div class="chat '+left+'">\n' +
        '              <div class="chat-avatar">\n' +
        '                <a routerLink="/profile" class="d-inline-block">\n' +
        '                  <img src="'+head+'" width="50" height="50" class="rounded-circle" alt="image">\n' +
        '                </a>\n' +
        '              </div>\n' +
        '              <div class="chat-body">\n' +
        '                <div class="chat-message">\n' +
        '                  <p>'+message+'</p>\n' +
        '                  <span class="time d-block">'+time+'</span>\n' +
        '                </div>\n' +
        '              </div>\n' +
        '            </div>';
    return html;
}

export default {
    connect(url){
        return connectRoom(url);
    },
    getMsgNum(){
        return msgNum
    },
    getContent(){
        return chatContent
    },
    getWebsocket(){
        return websocket;
    }

}